import React, {useCallback, useContext} from 'react';
import matericals from '../../component/material';
import sigima from './modules-configs';
import CreatorContext from './creator-context';
import './index.less';

export default (props: any) => {
  const {compConfigs, setCompConfigs} = useContext(CreatorContext);
  const dragHandler = (itemObj: any) => {
    compConfigs.dragComp = {...itemObj};
    setCompConfigs({...compConfigs});
  };
  const addHanlder = (itemObj: any) => {
    compConfigs.bricksConfigs.push({...itemObj});
    setCompConfigs({...compConfigs});
  }
  return <div>
    {sigima.map((itemObj, index) => {
      const { displayName, demoProps, name } = itemObj;
      const Item = matericals[displayName];
      return (<div className="materical-show-view" key={index}>
        <span className="materical-name">{name}</span>
        <span className="materical-add" onClick={() => {addHanlder(itemObj);}}>加</span>
        <span className="materical-drag" onDragStart={() => {dragHandler(itemObj);}} draggable>拖</span>
        <Item {...demoProps} />
      </div>);
    })}
  </div>
}